<script lang="ts">
    import dayjs from "dayjs";
    import Icon from "../Common/Icons/Icon.svelte";
    import { useDatepickerContext } from "./Datepicker.svelte";
    import { _ } from "svelte-i18n";
    import type { DatepickerStore } from "./Datepicker";

    const props = $props();
    const store = props.store;
    const ctx: any = useDatepickerContext();

    const current = $derived.by(() => {
        const arr = [];
        if (props.type === "quarterRange") {
            if (store.range?.[0]) {
                arr.push(dayjs(store.range[0]).format("YYYY-Q"));
            }
            if (store.range?.[1]) {
                arr.push(dayjs(store.range[1]).format("YYYY-Q"));
            }
        } else {
            if (props.value) {
                arr.push(dayjs(props.value).format("YYYY-Q"));
            }
        }
        return arr;
    });

    const onSelectQuarter = (num: number) => {
        const index = props.name === "end" ? 1 : 0;
        const d = new Date(store.currentMonth[index]);
        const months = [0, 3, 6, 9];
        d.setMonth(months[num]);
        store.currentMonth = props.name === "end" ? [store.currentMonth[0], d] : [d, store.currentMonth[1]];
        ctx && ctx.onSelectDate && ctx.onSelectDate(d, props.name);
    };

    const changeCurrentMonth = (store: DatepickerStore, type: "Month" | "FullYear", name: string, op: number, stick: boolean) => {
        const month = store.currentMonth[name === "end" ? 1 : 0];
        month[`set${type}`](month[`get${type}`]() + 1 * op);
        const newMonth = [...store.currentMonth];
        if (stick) {
            const other = newMonth[name === "end" ? 0 : 1];
            other[`set${type}`](other[`get${type}`]() + 1 * op);
        } else {
            if (dayjs(newMonth[0]).format("YYYY") === dayjs(newMonth[1]).format("YYYY") || newMonth[0].getTime() > newMonth[1].getTime()) {
                const other = newMonth[name === "end" ? 0 : 1];
                other[`set${type}`](other[`get${type}`]() + 1 * op);
            }
        }
        store.currentMonth = newMonth;
    };

    const onPrevYear = () => {
        changeCurrentMonth(store, "FullYear", props.name, -1, props.stick);
    };

    const onNextYear = () => {
        changeCurrentMonth(store, "FullYear", props.name, 1, props.stick);
    };

    const text = $derived(dayjs(store.currentMonth[props.name === "end" ? 1 : 0]).format("YYYY"));

    const currentYearQuarter = (num: number) => {
        return dayjs(store.currentMonth[props.name === "end" ? 1 : 0])
            .quarter(num + 1)
            .format("YYYY-Q");
    };
</script>

<div class="cm-date-picker-quarter">
    <div class="cm-date-picker-date-header">
        <div class="cm-date-picker-header-arrow">
            <Icon icon="chevronsLeft" onclick={onPrevYear} />
        </div>
        <span class="cm-date-picker-date-info">{text}</span>
        <div class="cm-date-picker-header-arrow">
            <Icon icon="chevronsRight" onclick={onNextYear} />
        </div>
    </div>
    <div class="cm-date-picker-quarter-body">
        <!-- svelte-ignore a11y_no_static_element_interactions -->
        {#each [0, 1, 2, 3] as q}
            <!-- svelte-ignore a11y_click_events_have_key_events -->
            <div class={{ "cm-date-picker-quarter-item": true, active: current.includes(currentYearQuarter(q)) }} onclick={() => onSelectQuarter(q)}>Q{q + 1}</div>
        {/each}
    </div>
</div>
